<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
    <el-form-item label="所属景区" prop="scenicId">
        <el-select
          v-model="queryParams.scenicId"
          placeholder="请选择"
          filterable
          clearable
        >
          <el-option
            v-for="item in regList"
            :key="item.id"
            :label="item.scenicName"
            :value="item.id"
            style="width: 350px"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单编号" prop="orderSn">
        <el-input
          v-model="queryParams.orderSn"
          placeholder="请输入订单编号"
          clearable
        />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input
          v-model="queryParams.phone"
          placeholder="请输入手机号"
          clearable
        />
      </el-form-item>
      <!-- <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" clearable placeholder="请选择状态">
          <el-option label="未支付" value="1"></el-option>
          <el-option label="已支付" value="2"></el-option>
          <el-option label="退款" value="5"></el-option>
          <el-option label="取消" value="6"></el-option>
          <el-option label="支付中" value="8"></el-option>
          <el-option label="取消中" value="9"></el-option>
        </el-select>
      </el-form-item>   -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
          >搜索</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="orderList" stripe style="width: 100%">
      <el-table-column prop="name" label="所属景区" >
      </el-table-column>
      <el-table-column prop="orderSn" label="订单号" >
      </el-table-column>
      <el-table-column prop="phone" label="手机号" >
      </el-table-column>
      <!-- <el-table-column prop="nickname" label="nickname">
      </el-table-column> -->
      <el-table-column prop="userId" label="用户ID" >
      </el-table-column>
      <el-table-column prop="itemName" label="商品名称">
      </el-table-column>
      <el-table-column prop="amountDouble" label="支付金额">
      </el-table-column>
      <el-table-column prop="payTime" label="支付时间">
        <!-- <template slot-scope="scope">
          {{parseTime(scope.row.payTime)}}
        </template> -->
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <!-- <span v-if="scope.row.status == 1">未支付</span> -->
          <span v-if="scope.row.status == 4">已支付</span>
          <!-- <span v-if="scope.row.status == 5">已退款</span> -->
          <!-- <span v-if="scope.row.status == 6">取消</span> -->
          <!-- <span v-if="scope.row.status == 8">支付中</span> -->
          <!-- <span v-if="scope.row.status == 9">取消中</span> -->
        </template> 
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.current"
      :limit.sync="queryParams.size"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  listOrder
} from "@/api/system/order";

import {getAllRegList} from "@/api/system/scenic";//获取景区

export default {
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      loading: true,
      total: 0,
      orderList: [],
      regList:[],
      activeName: "1",
      queryParams: {
        current: 1,
        size: 10,
        orderSn: undefined,
        phone:undefined,
      },
      // 表单参数
      form: {},
    };
  },
  created() {
    this.getList();
    this.getAllList();
  },
  methods: {
    getList() {
      this.loading = true;
      listOrder({
        ...this.queryParams,
      }).then((response) => {
        if (response) {
          this.orderList = response.data?.records;
          this.total = response.data?.total;
          this.loading = false;
        }
      });
    },
    getAllList() {
      getAllRegList().then(response => {
        this.regList = response.data;
      });
    },
    handleQuery() {
      this.queryParams.current = 1;
      this.getList();
    },
  },
};
</script>

<style></style>
